<template>
	<view class="box-bg" style="width: 100%;">
		<uni-nav-bar backgroundColor="#f5f5f5" shadow left-icon="left" :border='false' :shadow='false' @clickLeft="goBack" />
	</view>
	<div class="authorization-page">
		
		<!-- 顶部导航栏 -->
		<div class="header">
			<div class="back-button" @click="">
				<i class="arrow-left"></i>
			</div>
			<div class="app-info">
				<img :src="appIcon" alt="应用图标" class="app-icon" />
				<view class="">
					<span class="app-name">小默旅行</span>
					<span class="app-status">申请使用</span>
				</view>

			</div>
		</div>

		<!-- 主标题 -->
		<h1 class="main-title">获取你的头像、昵称</h1>

		<!-- 副标题 -->
		<p class="subtitle">你可选择使用不同的昵称、头像登录</p>

		<!-- 用户列表 -->
		<div class="user-list">
			<!-- 已选择的用户 -->
			<div class="user-item" v-for="(user, index) in users" :key="index">
				<div class="user-avatar">
					<img :src="user.avatar" alt="用户头像" />
				</div>
				<div class="user-info">
					<h3 class="user-name">{{ user.name }}</h3>
					<p class="user-description">{{ user.description }}</p>
				</div>
				<div class="check-icon" v-if="user.selected">
					<i class="checkmark">✓</i>
				</div>
				<div class="arrow-icon" v-else>
					<i class="arrow-right">›</i>
				</div>
			</div>

			<!-- 新建用户选项 -->
			<div class="user-item new-user" @click="">
				<div class="plus-icon">+</div>
				<div class="user-info">
					<h3 class="user-name">新建昵称头像</h3>
				</div>
				<div class="arrow-icon">
					<i class="arrow-right">›</i>
				</div>
			</div>
		</div>

		<!-- 底部按钮 -->
		<div class="button-container">
			<button class="allow-button" @click="goIndex">允许</button>
			<button class="deny-button" @click="">拒绝</button>
		</div>
	</div>
</template>

<script setup>
	import {
		ref
	} from "vue"
	const appIcon =
		'https://cdn8.axureshop.com/demo2024/2251242/images/%E5%BE%AE%E4%BF%A1%E7%99%BB%E5%BD%95/u3890.svg' // 应用图标占位符
	const users = [{
		avatar: '	https://cdn8.axureshop.com/demo2024/2251242/images/%E5%BE%AE%E4%BF%A1%E7%99%BB%E5%BD%95/u3894.svg', // 用户头像占位符
		name: '小白',
		description: '微信昵称头像',
		selected: true
	}]

	function goBack() {
		// 返回上一页的逻辑
		uni.navigateBack({
			delta: 1
		})
		// this.$router.go(-1);
	}

	function handleDeny() {
		// 处理拒绝按钮点击事件
		// console.log('用户点击了拒绝');
		uni.navigateBack({
			delta: 1
		})
		// 这里可以添加拒绝授权后的处理逻辑
	}

	function goIndex() {
		uni.switchTab({
			url: '/pagesA/login/newPhone'
		});
	}
	
</script>

<style scoped>
	.authorization-page {
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

		height: 100vh;
		padding: 0 15px;
		box-sizing: border-box;
	}

	/* 顶部导航栏 */
	.header {
		display: flex;
		align-items: center;
		padding: 15px 0;
		margin-bottom: 20px;
	}

	.back-button {
		margin-right: 10px;
	}

	.arrow-left {
		border: solid #333;
		border-width: 0 2px 2px 0;
		display: inline-block;
		padding: 5px;
		transform: rotate(135deg);
	}

	.app-info {
		display: flex;
		align-items: center;
	}

	.app-icon {
		width: 32px;
		height: 32px;
		margin-right: 10px;
		background-color: #ff4e81;
		border-radius: 4px;
	}

	.app-name {
		font-weight: bold;
		margin-right: 5px;
	}

	.app-status {
		font-size: 12px;
		color: #999;
	}

	/* 标题区域 */
	.main-title {
		font-size: 24px;
		margin-bottom: 10px;
		color: #333;
	}

	.subtitle {
		font-size: 14px;
		color: #999;
		margin-bottom: 20px;
	}

	/* 用户列表 */
	.user-list {
		background-color: #fff;
		border-radius: 8px;
		overflow: hidden;
		margin-bottom: 40px;
	}

	.user-item {
		display: flex;
		align-items: center;
		padding: 15px;
		border-bottom: 1px solid #f0f0f0;
	}

	.user-avatar {
		width: 48px;
		height: 48px;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 15px;
	}

	.user-avatar img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.user-info {
		flex: 1;
	}

	.user-name {
		font-size: 16px;
		margin-bottom: 4px;
		color: #333;
	}

	.user-description {
		font-size: 12px;
		color: #999;
	}

	.check-icon {
		color: #07c160;
		font-size: 20px;
	}

	.arrow-icon {
		color: #999;
		font-size: 20px;
	}

	.new-user {
		border-top: 1px solid #f0f0f0;
	}

	.plus-icon {
		width: 48px;
		height: 48px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background-color: #f0f0f0;
		margin-right: 15px;
		font-size: 24px;
		color: #999;
	}

	/* 底部按钮 */
	.button-container {
		position: fixed;
		bottom: 30px;
		left: 15px;
		right: 15px;
	}

	.allow-button,
	.deny-button {
		width: 100%;
		padding: 12px;
		border-radius: 20px;
		font-size: 16px;
		margin-bottom: 15px;
		border: none;
		cursor: pointer;
	}

	.allow-button {
		background-color: #07c160;
		color: white;
	}

	.deny-button {
		background-color: #f5f5f5;
		color: #333;
	}
</style>